<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>增加or修改</title>
    <!-- Bootstrap core CSS -->
    <link th:href="@{/css/bootstrap.css}" rel="stylesheet">
    <link th:href="@{/css/index.css}" rel="stylesheet">
    <link th:href="@{/css/config.css}" rel="stylesheet">
    <link th:href="@{/css/font-awesome.min.css}" rel="stylesheet">
    <link th:href="@{/css/jquery.pagination.css}" rel="stylesheet">
    <!-- 表单验证 -->
    <!--<link th:href="@{/css/bootstrapValidator.css}" rel="stylesheet">-->


</head>
<style>
    body {
        background: #edf0f2;
    }

    img {
        width: 100%;
        display: block;
        border: none;
        vertical-align: bottom;
        border: none;
    }

    input[type="button"] {
        -webkit-appearance: none;
    }

    .productDrawingBox {
        background-color: #fcfcfc;
        color: #333333;
        font-size: 16px;
        height: 150px;
        padding-left: 11px;
        border-bottom: solid 1px #e5e5e5;
    }

    .productDescription {
        height: 44px;
        line-height: 44px;
    }

    .productImg {
        height: 96px;
        overflow: hidden;
    }

    .imgBiMG {
        width: 100px;
        height: 100px;
        float: left;
        display: block;
    }

    .uploadDIv {
        width: 100px;
        height: 100px;
        background-color: #edf0f2;
        font-size: 28px;
        color: #bfbfbf;
        text-align: center;
        line-height: 81px;
        float: left;
        position: relative;
    }

    .uploadDIv input {
        width: 100px;
        height: 100px;
        opacity: 0;
        position: absolute;
        right: 0px;
        top: 0px;
        z-index: 4;
        padding: 0;
    }
</style>

<body>
<!-- nav导航 -->
<div th:replace="common/bar::#header"></div>
<!-- 页面主体 -->
<div class="dh mainbox">
    <!-- 左边菜单 -->
    <div th:replace="common/bar::#menu"></div>
    <!-- 右边主显示部分 -->
    <div class="main-rightbox">
        <div class="mainrightbox">
            <!-- 路径导航 -->
            <ol class="breadcrumb">
                <li><a th:href="@{/}">首页</a></li>
                <li class="active">基础管理</li>
                <li class="active">菜单管理</li>
                <li class="active">增加编辑</li>
            </ol>
            <!-- 网页主体内容部分 -->
            <div class="main_box ioep">


                <!-- 页面双排显示 -->
                <div class="rows">
                    <div class="col-md-10 col-md-offset-1">
                        <form role="form" class="form-horizontal rows" id="form-test" method="post" action="/movie/theatre/add">

                            <div class="form-group col-md-12">
                                <label for="user" class="col-sm-2 control-label">电影所在城市:</label>
                                <div class="col-sm-10">
                                    <select th:onchange="queryAdministrative()" id="city">
                                        <option value="0">--请选择城市--</option>
                                        <option th:text="${city.name}" th:value="${city.id}"
                                                th:each="city:${citys}"></option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group col-md-12">
                                <label for="user" class="col-sm-2 control-label">电影所在行政区:</label>
                                <div class="col-sm-10">
                                    <select id="administrativeRegion" name="administrativeRegionId">
                                        <option>--请先选择城市--</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group col-md-12">
                                <label for="user" class="col-sm-2 control-label">电影品牌:</label>
                                <div class="col-sm-10">
                                    <select name="brandId">
                                        <option th:each="brand:${brands}" th:value="${brand.id}"
                                                th:text="${brand.name}"></option>
                                    </select>
                                </div>
                            </div>

                            <div class="form-group col-md-12">
                                <label for="user" class="col-sm-2 control-label">影院名称</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" name="name" placeholder="请输入影院名"/>
                                </div>
                            </div>



                            <div class="form-group col-md-12">
                                <label for="user" class="col-sm-2 control-label">地址</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" name="address" placeholder="请输入影院地址"/>
                                </div>
                            </div>

                            <div class="form-group col-md-12">
                                <label for="user" class="col-sm-2 control-label">标准价格</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" name="price" placeholder="请输入影院标准价格"/>
                                </div>
                            </div>

                            <div class="form-group col-md-12">
                                <label for="user" class="col-sm-2 control-label">电话</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" name="phone" placeholder="请输入影院电话"/>
                                </div>
                            </div>

                            <div class="form-group col-md-12">
                                <label for="pwd" class="col-sm-2 control-label">影院图片</label>
                                <img src="https://catdog-movie.oss-cn-beijing.aliyuncs.com/heapPortrait/default.png"
                                     style="width: 200px;height: 200px" id="previewUrl">
                                <input id="uploadfile" type="file" style="margin-left: 180px"/>
                                <input type="hidden" name="previewUrl" id="movieImg">
                                <span style="font-size:13px;color: burlywood;margin-left: 180px">支持JPG,JPEG,PNG格式,且文件需小于1M</span>
                            </div>

                            <div class="form-group col-md-12">
                                <label for="user" class="col-sm-2 control-label">影院服务(服务简称:详情)</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" name="movieTheatreService" placeholder="请输入影院服务"/>
                                </div>
                            </div>

                            <div class="form-group col-md-12">
                                <div class="col-sm-offset-5 col-sm-2">
                                    <button id="btn-test" type="submit" class="btn btn-primary">提交</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
<!-- 引入公共js文件 -->
<script th:src="@{/js/jquery-3.3.1.min.js}"></script>
<script th:src="@{/js/jquery.slimscroll.min.js}"></script>
<script th:src="@{/js/bootstrap.js}"></script>
<script th:src="@{/js/modal.js}"></script>
<script th:src="@{/js/jquery.pagination.min.js}"></script>

<script>
    //通过城市查询行政区id
    function queryAdministrative() {
        let cityId = $("#city").val();
        if (cityId != 0) {
            //发送ajax获取行政区
            $.ajax({
                url: "/movie/administrativeRegion/get/" + cityId,
                success: function (response) {
                    var html = "";
                    $.each(response.data, function (i, n) {
                        html += '<option value="' + n.id + '" >' + n.name + '</option>'
                    })
                    $("#administrativeRegion").html(html)
                }
            })
        }

    }

    /**
     *  此方法为切换左边菜单的js文件
     */
    $(".list_dt").on("click", function () {
        $('.list_dd').stop();
        $(this).siblings("dt").removeAttr("id");
        if ($(this).attr("id") == "open") {
            $(this).removeAttr("id").siblings("dd").slideUp();
        } else {
            $(this).attr("id", "open").next().slideDown().siblings("dd").slideUp();
        }
    });


    $("#uploadfile").change(function () {
        var file = $("#uploadfile").val();
        if (file != null && file != '') {
            var str = $("#uploadfile").val().toString();
            var imgType = str.substr(str.indexOf("."), str.length)
            //获取oss传输签名
            $.ajax({
                url: "/oss/policy/movieTheatre",
                async: false,
                data: {
                    imgType: imgType
                },
                success: function (data) {
                    //保存数据
                    //获得图片文件
                    var request = new FormData();
                    var file = document.getElementById("uploadfile");
                    var filObj = file.files[0];
                    //上传文件参数
                    request.append("key", data.key)
                    request.append("policy", data.policy)
                    request.append("signature", data.signature)
                    request.append("ossaccessKeyId", data.accessid)
                    request.append("dir", data.dir)
                    request.append("host", data.host)
                    request.append("name", data.name)
                    request.append("success_action_status", 200)
                    request.append("file", filObj);
                    //保存图片
                    $.ajax({
                        url: "https://catdog-movie.oss-cn-beijing.aliyuncs.com",
                        enctype: "multipart/form-data",
                        processData: false,
                        cache: false,
                        async: false,
                        contentType: false,
                        type: 'post',
                        data: request,
                        success: function (request) {
                            $("#previewUrl").attr("src", data.url);
                            $("#movieImg").val(data.url)
                        }
                    })
                }
            })
        } else {
            alert('请选择文件！');
        }
    })
</script>
</body>

</html>